<template>
  <div>
    <el-row :gutter="9">
      <el-col :span="5">
        <el-form-item :label="$t('每:')">
          <el-select v-model="myFrequency.base" @change="selectChange1">
            <el-option
              v-for="(item) in frequency"
              :key="item.value"
              :label="$t(item.label)"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item v-show="myFrequency.base === 6" :label="$t('月')">
          <el-select
            v-model="myFrequency.monthValues"
            style="width:85%;"
            multiple
            @change="selectChange6"
          >
            <el-option
              v-for="(item,key) in monthValues"
              :key="key"
              :label="$t(item)"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item v-show="myFrequency.base === 4" :label="$t('周')">
          <el-select
            v-model="myFrequency.dayValues"
            multiple
            style="width:80%;"
            @change="selectChange4"
          >
            <el-option
              v-for="(item,key) in dayValues"
              :key="key"
              :label="$t(item)"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item v-show="myFrequency.base >= 5" :label="$t('日')">
          <el-select
            v-model="myFrequency.dayOfMonthValues"
            style="width:69%"
            multiple
            @change="selectChange5"
          >
            <el-option
              v-for="(item,index) in dayOfMonthValues"
              :key="index"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item v-show="myFrequency.base >= 2" :label="myFrequency.base >=3 ? $t('时') : $t('分')">
          <el-select
            v-show="myFrequency.base >= 3"
            v-model="myFrequency.hourValues"
            multiple
            style="width:80%"
            @change="selectChange3"
          >
            <el-option
              v-for="item in hourValues"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
          <el-select
            v-show="myFrequency.base <3"
            v-model="myFrequency.minuteValues"
            multiple
            style="width:70%"
            @change="selectChange2"
          >
            <el-option
              v-for="item in minuteValues"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!--      <el-col :span="5">-->
      <!--        <el-form-item v-show="myFrequency.base >= 3" :label="$t('分钟=>')">-->
      <!--          <el-select-->
      <!--            v-model="myFrequency.minuteValues"-->
      <!--            multiple-->
      <!--            style="width:70%"-->
      <!--            @change="selectChange2"-->
      <!--          >-->
      <!--            <el-option-->
      <!--              v-for="item in minuteValues"-->
      <!--              :key="item"-->
      <!--              :label="item"-->
      <!--              :value="item"-->
      <!--            />-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
    </el-row>
    <el-row v-if="false">
      <el-col :span="23">
        <el-form-item :label="$t('cron表达式：')">
          {{ jobCron }}
        </el-form-item>
      </el-col>
    </el-row>
    <!--<el-row>
      <el-col :span="23">
        <el-form-item label="最近5次运行时间：">
          <el-button type="primary" size="small" @click="runCron">点击查看</el-button>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="23">
        <div v-for="item in cronList" :key="item" style="padding:0 5px;">{{ item }}</div>
      </el-col>
    </el-row>-->
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: undefined
    },
    cronValue: {
      type: Object,
      default: undefined
    }
  },
  data() {
    return {
      jobCron: '',
      txtLen: 500,
      isCron: true,
      myFrequency: {
        base: 1,
        dayValues: '',
        dayOfMonthValues: '',
        monthValues: '',
        hourValues: '',
        minuteValues: ''
      },
      modifyFrequency: {
        dayValues: '',
        dayOfMonthValues: '',
        monthValues: '',
        hourValues: '',
        minuteValues: ''
      },
      frequency: [
        {
          value: 3,
          label: '天'
        }, {
          value: 4,
          label: '星期'
        }, {
          value: 5,
          label: '月'
        }, {
          value: 6,
          label: '年'
        }
      ],
      baseFrequency: {
        minute: 1,
        hour: 2,
        day: 3,
        week: 4,
        month: 5,
        year: 6
      },
      dayValues: {
        1: '星期日',
        2: '星期一',
        3: '星期二',
        4: '星期三',
        5: '星期四',
        6: '星期五',
        7: '星期六'
      },
      dayOfMonthValues: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24,
        25, 26, 27, 28, 29, 30, 31
      ],
      monthValues: {
        1: '一月',
        2: '二月',
        3: '三月',
        4: '四月',
        5: '五月',
        6: '六月',
        7: '七月',
        8: '八月',
        9: '九月',
        10: '十月',
        11: '十一月',
        12: '十二月'
      },
      hourValues: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
      minuteValues: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55],
      baseCout: 0,
      id: '',
      cronList: []
    }
  },
  watch: {
    value: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal) {
            this.jobCron = newVal
          } else {
            this.myFrequency = {
              base: undefined,
              dayValues: [],
              dayOfMonthValues: [],
              monthValues: [],
              hourValues: [],
              minuteValues: []
            }
            this.jobCron = undefined
          }
        })
      },
      immediate: true
    },
    jobCron(newVal) {
      if (newVal) {
        this.$emit('input', newVal)
      }
    },
    cronValue: {
      handler(newVal) {
        this.$nextTick(() => {
          if (newVal) {
            console.log(newVal)
            this.myFrequency = newVal
          }
        })
      },
      immediate: true
    }
  },
  created() {
    /* if (this.value) {
      const arr = this.value.split(' ')
      if (arr.length >= 6) {
        this.myFrequency = {
          base: arr[0],
          dayValues: arr[1],
          dayOfMonthValues: arr[2],
          monthValues: arr[3],
          hourValues: arr[4],
          minuteValues: arr[5]
        }
      }
    } */
  },
  mounted() {
  },
  methods: {
    runCron() {
      const params = {
        jobCron: this.jobCron
      }
      console.log(params)
      // ajax.getJson(getTimeUrl, params, res => {
      //     if (res.result == 200) this.cronList = res.obj
      //     else this.cronList = []
      //   },
      //   err => {
      //     console.log(err)
      //   })
    },
    getMothValue() {
      const list = []
      for (let i = 0; i < 31; i++) {
        let j = i
        const currentJson = {
          value: ++j,
          label: j + this.$t('号')
        }
        list[i] = currentJson
      }
      this.dayOfMonthValues = list
    },
    hasClear(val) {
      if (val < this.baseCout) {
        this.myFrequency.minuteValues = []
        this.myFrequency.hourValues = []
        this.myFrequency.dayValues = []
        this.myFrequency.dayOfMonthValues = []
        this.myFrequency.monthValues = []
      }
    },
    selectChange1(val) {
      this.hasClear(val)
      this.baseCout = val
      if (this.modifyFrequency.minuteValues) this.myFrequency.minuteValues = this.modifyFrequency.minuteValues
      if (this.modifyFrequency.hourValues) this.myFrequency.hourValues = this.modifyFrequency.hourValues
      if (this.modifyFrequency.dayValues) this.myFrequency.dayValues = this.modifyFrequency.dayValues
      if (this.modifyFrequency.dayOfMonthValues) this.myFrequency.dayOfMonthValues = this.modifyFrequency.dayOfMonthValues
      if (this.modifyFrequency.monthValues) this.myFrequency.monthValues = this.modifyFrequency.monthValues
      this.modifyFrequency = {
        dayValues: '',
        dayOfMonthValues: '',
        monthValues: '',
        hourValues: '',
        minuteValues: ''
      }
      this.getCron(val)
    },
    getCron(val) {
      this.$nextTick(() => {
        this.$emit('update:cron-value', this.myFrequency)
      })
      var cron = ['0', '*', '*', '*', '*', '?']
      if (val && val >= this.baseFrequency.hour) {
        if (this.myFrequency.minuteValues.length === 0) this.myFrequency.minuteValues.push(0)
        cron[1] = typeof this.myFrequency.minuteValues !== 'undefined' ? this.myFrequency.minuteValues : '0'
      }
      if (val && val >= this.baseFrequency.day) {
        // if (this.myFrequency.hourValues.length === 0) this.myFrequency.hourValues.push(0)
        cron[2] = typeof this.myFrequency.hourValues !== 'undefined' && this.myFrequency.hourValues.length > 0 ? this.myFrequency.hourValues : '*'
      }
      if (val && val === this.baseFrequency.week) {
        if (this.myFrequency.dayValues.length === 0) this.myFrequency.dayValues.push('1')
        cron[3] = '?'
        cron[5] = this.myFrequency.dayValues
      }
      if (val && val >= this.baseFrequency.month) {
        if (this.myFrequency.dayOfMonthValues.length === 0) this.myFrequency.dayOfMonthValues.push(1)
        cron[3] = typeof this.myFrequency.dayOfMonthValues !== 'undefined' ? this.myFrequency.dayOfMonthValues : '?'
      }
      if (val && val === this.baseFrequency.year) {
        if (this.myFrequency.monthValues.length === 0) this.myFrequency.monthValues.push('1')
        cron[4] = typeof this.myFrequency.monthValues !== 'undefined' ? this.myFrequency.monthValues : '*'
      }
      this.jobCron = cron.join(' ')
    },
    selectChange2(val) {
      this.myFrequency.minuteValues = val
      this.getCron(this.myFrequency.base)
    },
    selectChange3(val) {
      this.myFrequency.hourValues = val
      this.getCron(this.myFrequency.base)
    },
    selectChange4(val) {
      this.myFrequency.dayValues = val
      this.getCron(this.myFrequency.base)
    },
    selectChange5(val) {
      this.myFrequency.dayOfMonthValues = val
      this.getCron(this.myFrequency.base)
    },
    selectChange6(val) {
      this.myFrequency.monthValues = val
      this.getCron(this.myFrequency.base)
    },
    // 获取的编辑详情接口
    getModifyData(val) {
      this.id = val.id
      const params = {
        id: val.id
      }
      console.log(params)
      // ajax.getJson(getTimeTaskMessageUrl, params, res => {
      //     if (res.result == 200) {
      //       this.fromDefaultCron(res.obj.jobCron)
      //     }
      //   },
      //   err => {
      //     console.log(err)
      //   })
    },
    fromDefaultCron(value) {
      const cron = value.replace(/\s+/g, ' ').split(' ')
      var frequency = { base: '1' } // default: every minute
      var tempArray = []
      if (cron[1] === '*' && cron[2] === '*' && cron[3] === '*' && cron[4] === '*' && cron[5] === '?') {
        frequency.base = 1 // every minute
      } else if (cron[2] === '*' && cron[3] === '*' && cron[4] === '*' && cron[5] === '?') {
        frequency.base = 2 // every hour
      } else if (cron[3] === '*' && cron[4] === '*' && cron[5] === '?') {
        frequency.base = 3 // every day
      } else if (cron[3] === '?') {
        frequency.base = 4 // every week
      } else if (cron[4] === '*' && cron[5] === '?') {
        frequency.base = 5 // every month
      } else if (cron[5] === '?') {
        frequency.base = 6 // every year
      }
      if (cron[1] !== '*') {
        // preparing to handle multiple minutes
        tempArray = cron[1].split(',')
        for (var i1 = 0; i1 < tempArray.length; i1++) { tempArray[i1] = +tempArray[i1] }
        frequency.minuteValues = tempArray
      }
      if (cron[2] !== '*') {
        // preparing to handle multiple hours
        tempArray = cron[2].split(',')
        for (var i2 = 0; i2 < tempArray.length; i2++) { tempArray[i2] = +tempArray[i2] }
        frequency.hourValues = tempArray
      }
      if (cron[3] !== '*' && cron[3] !== '?') {
        // preparing to handle multiple days of the month
        tempArray = cron[3].split(',')
        for (var i3 = 0; i3 < tempArray.length; i3++) { tempArray[i3] = +tempArray[i3] }
        frequency.dayOfMonthValues = tempArray
      }
      if (cron[4] !== '*') {
        // preparing to handle multiple months
        tempArray = cron[4].split(',')
        for (var i4 = 0; i4 < tempArray.length; i4++) { tempArray[i4] = (+tempArray[i4]) + '' }
        frequency.monthValues = tempArray
      }
      if (cron[5] !== '*' && cron[5] !== '?') {
        // preparing to handle multiple days of the week
        tempArray = cron[5].split(',')
        for (var i5 = 0; i5 < tempArray.length; i5++) { tempArray[i5] = (+tempArray[i5]) + '' }
        frequency.dayValues = tempArray
      }
      this.myFrequency.base = frequency.base
      if (frequency.dayOfMonthValues) this.modifyFrequency.dayOfMonthValues = frequency.dayOfMonthValues
      if (frequency.hourValues) this.modifyFrequency.hourValues = frequency.hourValues
      if (frequency.minuteValues) this.modifyFrequency.minuteValues = frequency.minuteValues
      if (frequency.dayValues) this.modifyFrequency.dayValues = frequency.dayValues
      if (frequency.monthValues) this.modifyFrequency.monthValues = frequency.monthValues
    }
  }
}
</script>
